<template>
  <div class="roster-container">
    <!-- 顶部区域 -->
    <div class="header flex">
      <div class="selecte-section flex">
        <div class="selecte-wrap flex">
          <img src="@/assets/images/partment.png" alt class="partment-icon" />
          <div class="selecte-title">行政部门</div>
          <Icon type="md-arrow-dropdown" class="dropdown" size="20" />
        </div>
      </div>
      <div class="right flex">
        <Button class="save-btn-green" @click="addEmployee">添加员工</Button>
        <!-- <Dropdown style="margin-left: 20px">
          <Button class="more-btn">
            更多功能
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem>批量删除员工</DropdownItem>
            <DropdownItem>回收站</DropdownItem>
          </DropdownMenu>
        </Dropdown>-->
      </div>
    </div>

    <!-- 顶部数据统计 -->
    <div class="top-carts">
      <ul class="navigation">
        <li class="group" style="flex-grow: 4;" :class="{active:headerActiveIndex <3}">
          <div class="hover contentTwo" @click="filter(0,'全部')">
            <div class="detail" :class="{contentActive:headerActiveIndex ==0 }">
              <div class="title">在职</div>
              <span
                class="highlight value"
                v-if="employeeCount.list2"
              >{{employeeCount.list2[0].work_nature_cnt}}</span>
              <span>人</span>
            </div>
          </div>
          <div
            class="hover"
            @click="filter(1,'全职')"
            :class="{contentActive:headerActiveIndex ==1 }"
          >
            <div class="detail2">
              <div class="title2">全职</div>
              <div class="bottom">
                <span
                  class="value"
                  v-if="employeeCount.list2"
                >{{employeeCount.list2[1].work_nature_cnt}}</span>
                <span>人</span>
              </div>
            </div>
          </div>
          <div
            class="hover"
            @click="filter(2,'实习生')"
            :class="{contentActive:headerActiveIndex ==2 }"
          >
            <div class="detail2 no-border">
              <div class="title2">实习生</div>
              <div class="bottom">
                <span
                  class="value"
                  v-if="employeeCount.list2"
                >{{employeeCount.list2[2].work_nature_cnt}}</span>
                <span>人</span>
              </div>
            </div>
          </div>
          <!---->
        </li>
        <li
          class="group"
          style="flex-grow: 3;"
          :class="{active:headerActiveIndex == 3 || headerActiveIndex ==4 || headerActiveIndex ==5}"
        >
          <div
            class="hover"
            @click="filter(3,'试用期')"
            :class="{contentActive:headerActiveIndex ==3 }"
          >
            <div class="detail2">
              <div class="title2">试用期</div>
              <div class="bottom">
                <span
                  class="value"
                  v-if="employeeCount.list2"
                >{{employeeCount.list1[2].employee_cnt}}</span>
                <span>人</span>
              </div>
            </div>
          </div>
          <div
            class="hover"
            @click="filter(4,'待离职')"
            :class="{contentActive:headerActiveIndex ==4 }"
          >
            <div class="detail2">
              <div class="title2">待离职</div>
              <div class="bottom">
                <span class="value">0</span>
                <span>人</span>
              </div>
            </div>
          </div>
          <div
            class="hover"
            @click="filter(5,'正式')"
            :class="{contentActive:headerActiveIndex ==5 }"
          >
            <div class="detail2 no-border">
              <div class="title2">正式</div>
              <div class="bottom">
                <span
                  class="value"
                  v-if="employeeCount.list2"
                >{{employeeCount.list1[2].employee_cnt}}</span>
                <span>人</span>
              </div>
            </div>
          </div>
        </li>
        <li class="group" style="flex-grow: 2;" :class="{active:5<headerActiveIndex}">
          <div
            class="hover"
            @click="filter(6,'待入职')"
            :class="{contentActive:headerActiveIndex ==6 }"
          >
            <div class="detail2">
              <div class="title2">待入职</div>
              <div class="bottom">
                <span class="value">0</span>
                <span>人</span>
              </div>
            </div>
          </div>
          <div
            class="hover"
            @click="filter(7,'已离职')"
            :class="{contentActive:headerActiveIndex ==7 }"
          >
            <div class="detail2 no-border">
              <div class="title2">已离职</div>
              <div class="bottom">
                <span class="value">0</span>
                <span>人</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <Spin fix v-if="showLoading">
        <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
        <div>加载中</div>
      </Spin>
      <ul class="table-actions flex">
        <li class="table-action-item" @click="refresh">
          刷新
          <Icon type="ios-refresh" size="18" />
        </li>
        <li class="table-action-item" @click="triggerTableTitle">选择表头</li>
        <li class="table-action-item">
          <Dropdown>
            <div>
              按部门排序
              <Icon type="ios-arrow-down"></Icon>
            </div>
            <DropdownMenu slot="list">
              <DropdownItem>按岗位职级排序</DropdownItem>
              <DropdownItem>按最早入职排序</DropdownItem>
              <DropdownItem>按最近入职排序</DropdownItem>
              <DropdownItem>工号升序</DropdownItem>
              <DropdownItem>工号降序</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </li>
        <!-- <li class="table-action-item" @click="multiEditing">批量编辑</li> -->
        <!-- <li class="table-action-item">导出</li> -->
      </ul>

      <!-- 表格 -->
      <div class="table-wrap mt24">
        <Table width="100%" :columns="columns" :data="employeeList" class="table4"></Table>

        <!-- 自定义表头 -->
        <div class="table-header-title none" :class="{tableTitleShowed:openTableTitle}">
          <div class="title-showed">
            <div class="table-header-item">
              <div class="header-row">
                <div class="table-item-title">已显示表头</div>
                <div class="desc">
                  可
                  <i>拖拽</i>表头调整显示顺序
                </div>
              </div>
              <div class="btns-wrap flex flex-wrap">
                <Button disabled class="btn-item-disabled">姓名</Button>
                <Button disabled type="primary" class="btn-item-disabled">头像</Button>
                <!-- <div class="selecte-btn btn-item">
                  <div class="btn-title">成员关系</div>
                  <Icon type="ios-close" size="18" class="delelte-btn" />
                </div>-->

                <template v-for="(item,index) in customHeader">
                  <template v-if="item.english_cloumn_name !== 'name'">
                    <div class="selecte-btn btn-item" v-if="item.is_show ==1 && item.is_title == 1">
                      <div
                        class="btn-title"
                        :data-id="item.id"
                        :data-index="index"
                      >{{item.cloumn_name}}</div>
                      <Icon
                        type="ios-close"
                        size="18"
                        class="delelte-btn"
                        @click="delCustomHeadItem(item,index)"
                      />
                    </div>
                  </template>
                </template>
              </div>
            </div>
            <div class="table-header-item table-header-item3">
              <div class="header-row">
                <div class="table-item-title">未选择表头</div>
                <!-- <div class="desc">
                  可
                  <i>拖拽</i>表头调整显示顺序
                </div>-->
              </div>
              <div class="btns-container flex">
                <!-- <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>-->
                <template v-for="(item,index) in customHeader">
                  <template v-if="item.english_cloumn_name !== 'name'">
                    <div
                      class="btn-wrap"
                      :data-id="item.id"
                      :data-index="index"
                      v-if="item.is_show ==1 && item.is_title == 2"
                      @click="addCustomHeadItem(item,index)"
                    >
                      <Button class="btn-item-unselected">{{item.cloumn_name}}</Button>
                      <div class="hover-add-btn none">+ 添加</div>
                    </div>
                  </template>
                </template>
              </div>
            </div>
          </div>

          <div class="footer-btns">
            <Button class="cancle-btn" @click="closeTableTitle">取消</Button>
            <Button type="primary" class="save-btn" @click="saveChangeCustomHeadItem">保存</Button>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速编辑 -->
    <div class="mask none" :class="{block:rightCardCloseStatus}" @click="closeRightCard"></div>
    <div class="right-cart none" :class="{block:rightCardCloseStatus}">
      <div class="right-cart-top flex">
        <div class="right-cart-title">编辑员工信息</div>
        <Icon type="md-close" class="right-cart-close" size="24" @click="closeRightCard" />
      </div>
      <div class="right-cart-body">
        <Form :model="createForm" :label-width="120" ref="editForm" :rules="rules">
          <!-- <div class="form-item-row">
            <FormItem label="姓名">
              <Input v-model="formItem.name" placeholder="姓名" class="form-input"></Input>
            </FormItem>
          </div>
          </div>-->
          <ul class="row-list clearfix">
            <template v-for="(item,index) in editForm">
              <li class="row-item" v-if="item.english_cloumn_name == 'name'">
                <FormItem label="姓名" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.name" class="form-input300"></i-input>
                </FormItem>
              </li>

              <li class="row-item" v-if="item.english_cloumn_name == 'gender'">
                <FormItem label="性別" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <RadioGroup v-model="createForm.gender">
                    <Radio label="男"></Radio>
                    <Radio label="女"></Radio>
                  </RadioGroup>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'mobile'">
                <FormItem label="手机号码" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.mobile" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'email'">
                <FormItem label="个人邮箱" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.email" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'id_type'">
                <FormItem label="证件类型" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-select v-model="createForm.id_type" placeholder="请选择" class="form-input300">
                    <Option
                      v-for="(item,index) in credentials"
                      :key="index"
                      :label="item.value"
                      :value="item.value"
                    ></Option>
                  </i-select>
                </FormItem>
                <!-- <div class="replenish">
                  管理证件类型，
                  <a href>点击这里</a>
                </div>-->
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'id_no'">
                <FormItem label="证件号码" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.id_no" class="form-input300"></i-input>
                </FormItem>
              </li>
              <!-- <li  class="row-item" v-if="item.english_cloumn_name == 'name'" >
               <FormItem label="身份证有效期" prop="id_date" >
                  <i-input v-model="createForm.id_date" class="form-input300"></i-input>
                </FormItem>
              </li>-->
              <li class="row-item" v-if="item.english_cloumn_name == 'birthday'">
                <FormItem label="生日" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <DatePicker
                    v-model="createForm.birthday"
                    type="date"
                    class="form-input300"
                    placeholder="选择日期"
                  ></DatePicker>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'is_marry'">
                <FormItem label="是否已婚" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.is_marry" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'is_fertile'">
                <FormItem label="是否已育" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.is_fertile" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'country'">
                <FormItem label="国家地区" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.country" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'nation'">
                <FormItem label="民族" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-select v-model="createForm.nation" placeholder="请选择" class="form-input300">
                    <Option
                      v-for="(item,index) in nation"
                      :key="index"
                      :label="item.value"
                      :value="item.value"
                    ></Option>
                  </i-select>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'politic_countenance'">
                <FormItem label="政治面貌" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.politic_countenance" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'wechat'">
                <FormItem label="微信号" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.wechat" class="form-input300"></i-input>
                </FormItem>
              </li>

              <li class="row-item" v-if="item.english_cloumn_name == 'native_place'">
                <FormItem label="籍贯" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.native_place" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'native_city'">
                <FormItem label="户籍城市" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-select
                    v-model="createForm.native_city"
                    placeholder="请选择"
                    class="form-input300"
                  >
                    <Option
                      v-for="(item,index) in native_city"
                      :key="index"
                      :label="item.value"
                      :value="item.value"
                    ></Option>
                  </i-select>
                </FormItem>
              </li>

              <li class="row-item" v-if="item.english_cloumn_name == 'native_address'">
                <FormItem label="户籍地址" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.native_address" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'work_date'">
                <FormItem label="参加工作时间" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.work_date" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'highest_education'">
                <FormItem label="最高学历" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.highest_education" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'school'">
                <FormItem label="毕业院校" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.school" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'major'">
                <FormItem label="毕业专业" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.major" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'graduation_time'">
                <FormItem label="毕业时间" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.graduation_time" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'learning_modality'">
                <FormItem label="学习形式" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <Select
                    v-model="createForm.learning_modality"
                    placeholder="请选择"
                    class="form-input300"
                  >
                    <Option
                      v-for="(item,index) in learning_modality"
                      :label="item.value"
                      :key="index"
                      :value="item.value"
                    ></Option>
                  </Select>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'qq'">
                <FormItem label="QQ号" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.qq" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'telphone'">
                <FormItem label="工作电话" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.telphone" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'extension_number'">
                <FormItem label="分机号" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.extension_number" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'residential_address'">
                <FormItem label="现居住地" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.residential_address" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'emergency_person'">
                <FormItem
                  label="主要紧急联系人姓名"
                  :prop="item.is_require == 1 ?item.english_cloumn_name:''"
                >
                  <i-input v-model="createForm.emergency_person" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'emergency_mobile'">
                <FormItem
                  label="主要紧急联系人电话"
                  :prop="item.is_require == 1 ?item.english_cloumn_name:''"
                >
                  <i-input v-model="createForm.emergency_mobile" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'bankcard_no'">
                <FormItem label="工资卡卡号" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.bankcard_no" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'bankcard_city'">
                <FormItem label="工资卡开户城市" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.bankcard_city" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'bankcard_city'">
                <FormItem label="银行名称" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.bankcard_city" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'social_account'">
                <FormItem label="个人社保账号" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.social_account" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'accumulation_fund'">
                <FormItem label="个人公积金账号" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.accumulation_fund" class="form-input300"></i-input>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'entry_time'" :index="index">
                <FormItem label="入职时间" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <DatePicker
                    v-model="createForm.entry_time"
                    :options="joinDate"
                    type="date"
                    class="form-input300"
                    placeholder="选择日期"
                  ></DatePicker>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'probation_period'">
                <FormItem label="试用期" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-select
                    v-model="createForm.probation_period"
                    placeholder="请选择"
                    class="form-input217"
                  >
                    <i-option value="试用">试用</i-option>
                    <i-option value="正式">正式</i-option>
                  </i-select>
                  <i-select
                    v-model="createForm.probation_period_type"
                    placeholder="个月"
                    class="form-input75"
                  >
                    <i-option value="个月">个月</i-option>
                    <i-option value="天">天</i-option>
                  </i-select>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'company'">
                <FormItem label="合同公司" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-select v-model="createForm.company" placeholder="请选择" class="form-input300">
                    <Option
                      v-for="(item,index) in work_nature"
                      :label="item.value"
                      :value="item.value"
                      :key="index"
                    ></Option>
                  </i-select>
                  <Icon
                    type="ios-add-circle-outline"
                    size="30"
                    class="form-option-add-btn"
                    @click="showmodal"
                  />
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'organization_name'">
                <FormItem label="部门" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-select v-model="createForm.organization_id" 
                   @on-change="orgChange"
                  :label-in-value="true"
                  placeholder="请选择" class="form-input300">
                    <Option
                      v-for="(item,index) in orgList"
                      :value="item.value"
                      :label="item.label"
                      :key="index"
                    ></Option>
                  </i-select>
                  <Icon
                    type="ios-add-circle-outline"
                    size="30"
                    class="form-option-add-btn"
                    @click="showmodal('department')"
                  />
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'post'">
                <FormItem label="职务" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-select v-model="createForm.post" placeholder="请选择" class="form-input300">
                    <Option
                      v-for="(item,index) in selecte.post"
                      :value="item.value"
                      :label="item.value"
                      :key="index"
                    ></Option>
                  </i-select>
                  <Icon
                    type="ios-add-circle-outline"
                    size="30"
                    class="form-option-add-btn"
                    @click="showmodal('post')"
                  />
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'position'">
                <FormItem label="岗位" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-select v-model="createForm.position" placeholder="请选择" class="form-input300">
                    <Option
                      v-for="(item,index) in selecte.position"
                      :value="item.value"
                      :label="item.value"
                      :key="index"
                    ></Option>
                  </i-select>
                  <Icon
                    type="ios-add-circle-outline"
                    size="30"
                    class="form-option-add-btn"
                    @click="showmodal('position')"
                  />
                </FormItem>
              </li>
              <!-- <li class="row-item" v-if="item.english_cloumn_name == 'post_level'" >
                <FormItem label="职级" prop="post_level" >
                  <i-select v-model="createForm.post_level" placeholder class="form-input300">
                      <Option
                      v-for="item in selecte.post"
                      :value="item.value"
                    ></Option>
                  </i-select>
                    <i-input v-model="createForm.post_level" class="form-input300"></i-input>
            
                </FormItem>
              </li>-->
              <li class="row-item" v-if="item.english_cloumn_name == 'work_nature'">
                <FormItem label="工作性质" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-select v-model="createForm.work_nature" placeholder class="form-input300">
                    <Option
                      v-for="(item,index) in work_nature"
                      :value="item.value"
                      :label="item.value"
                      :key="index"
                    ></Option>
                  </i-select>
                </FormItem>
                <!-- <div class="replenish">
                  管理工作性质，
                  <a href>点击这里</a>
                </div>-->
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'employee_status'">
                <FormItem label="员工状态" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-select v-model="createForm.employee_status" placeholder class="form-input300">
                    <i-option value="试用">试用</i-option>
                    <i-option value="正式">正式</i-option>
                  </i-select>
                </FormItem>
              </li>
              <li class="row-item" v-if="item.english_cloumn_name == 'work_no'">
                <FormItem label="工号" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.work_no" class="form-input300"></i-input>
                </FormItem>
              </li>

              <li class="row-item" v-if="item.english_cloumn_name == 'work_city'">
                <FormItem label="工作城市" prop="work_city">
                  <Cascader
                    :data="work_city"
                    v-model="createForm.work_city"
                    @on-change="workCityChange"
                    class="form-input300"
                  ></Cascader>
                </FormItem>
              </li>

              <li class="row-item" v-if="item.english_cloumn_name == 'work_place'">
                <FormItem label="工作地点" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-select v-model="createForm.work_place" placeholder="请选择" class="form-input300">
                    <Option
                      v-for="(item,index) in selecte.work_place"
                      :value="item.value"
                      :label="item.value"
                      :key="index"
                    ></Option>
                  </i-select>
                  <Icon
                    type="ios-add-circle-outline"
                    size="30"
                    class="form-option-add-btn"
                    @click="showmodal('work_place')"
                  />
                </FormItem>
              </li>

              <li class="row-item" v-if="item.english_cloumn_name == 'attendance_no'">
                <FormItem label="考勤编号" :prop="item.is_require == 1 ?item.english_cloumn_name:''">
                  <i-input v-model="createForm.attendance_no" class="form-input300"></i-input>
                </FormItem>
              </li>
            </template>
          </ul>
        </Form>
        <div class="right-cart-footer">
          <Button class="cancle-btn-border" @click="closeRightCard">取消</Button>
          <Button type="default" class="save-btn-green ml12" @click="saveEdit" :loading="saving">保存</Button>
        </div>
      </div>
    </div>

    <!-- 快速编辑end -->
  </div>
</template>
<script>
import { personnel as api } from "@/apis";
import http from "@/utils/http";
import commonRules from "@/utils/rules";
import selectList from "@/utils/selecteList.js";
export default {
  name: "list",

  data() {
    return {
      ...selectList,
      showLoading: true, //loading 显示
      headerActiveIndex: 0,
      saving:false,
      filterStatus:'全部',//顶部筛选的状态
      orgList:[],
      columns: [
        {
          title: " ",
          key: "avatar",
          width: "60",
          render: (h, params) => {
            return h("div", [
              h("img", {
                class: "avatar-table",
                attrs: {
                  src:
                    ""
                }
              })
            ]);
          }
        },
        {
          title: "操作",
          key: "action",
          fixed: "right",
          align: "left",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.openRightCard(params);
                    }
                  }
                },
                "快速编辑"
              )
            ]);
          }
        }
      ],
      selecte: {
        post: [],
        compay: [],
        work_place: [],
        position: [],
        department: []
      },

      openTableTitle: false,
      formItem: {
        input: "",
        select: "",
        radio: "male",
        checkbox: [],
        switch: true,
        date: "",
        time: "",
        slider: [20, 50],
        textarea: ""
      },
      ruleValidate: {
       
      },
      employeeList:[],
      rightCardCloseStatus: false,
      customHeader: [], //自定义表头
      customHeaderChanged: [], //自定义表头，变更的列表
      all: [], // 全部 员工状态
      fulltime: [], //全职
      internship: [], //实习
      probation: [], //试用期
      official: [], // 正式员工
      readyDimission: [], //待离职,
      employeeCount: {}, //头部统计
      personinfoList: [], //个人信息
      entryinfoList: [], // 入职信息
      rules: commonRules,
      createForm: {}, //编辑form
      credentials: [
        {
          value: "身份证",
          label: "身份证"
        },
        {
          value: "护照",
          label: "护照"
        },
        {
          value: "军官证",
          label: "军官证"
        },
        {
          value: "其他",
          label: "其他"
        }
      ],
      learning_modality: [],
      editForm: [] //右侧编辑创建的
    };
  },
  methods: {

    // 打开选择表头
    triggerTableTitle() {
      this.openTableTitle = true;
    },

    // 关闭选择表头
    closeTableTitle() {
      this.openTableTitle = false;
    },

    // 关闭右侧快速编辑
    closeRightCard() {
      this.rightCardCloseStatus = false;
      this.update();
    },

    // 打开右侧快速编辑框
    openRightCard(a, b) {
      console.log(a.row);
      let _thisColums = this.columns;
      let _colums = _thisColums.slice(1, _thisColums.length - 1);
      this.editForm = _colums;
      this.createForm = a.row;
      this.rightCardCloseStatus = true;
    },

    // 多个编辑
    multiEditing() {
      console.log(this.columns[0].type);
      if (!this.columns[0].type && this.columns[0].type !== "selection") {
        this.columns.unshift({
          title: " ",
          key: "selection",
          type: "selection",
          width: "60"
        });
      } else {
        this.columns.shift();
      }
    },

    // 添加员工
    addEmployee() {
      this.$router.push("/personnel/relation/enrollment/add/employee");
    },

    // 员工列表
    getList(cb) {
      http.get(api.employeelist,{}).then(res => {
        let temp = res.data.list.data;
        let all = [];
        let fulltime = [];
        let internship = [];
        let probation = [];
        let official = [];
        let readyDimission = [];
        temp.forEach(e => {
          Object.keys(e).forEach(i => {
            if (!e[i]) {
              e[i] = "";
            }
          });
          if (e.employee_status == "试用") {
            probation.push(e);
          }
          if (e.employee_status == "待离职") {
            readyDimission.push(e);
          }
          if (e.employee_status == "正式") {
            official.push(e);
          }
          if (e.work_nature == "全职") {
            fulltime.push(e);
          }
          if (e.work_nature == "实习生") {
            internship.push(e);
          }
        });
        this.employeeList = temp;
        this.showLoading = false;
        this.all = temp;
        this.fulltime = fulltime;
        this.internship = internship;
        this.probation = probation;
        this.official = official;
        this.readyDimission = readyDimission;
        if(cb){
          cb();
          console.log('表格数据更新');
        }
      });
    },

    // 自定义表头数据
    getTableHeadItem() {
      http.get(api.personinfo, {}).then(res => {
        let person = res.data;
        http.get(api.entryinfo, {}).then(e => {
          let entry = e.data;
          let concat = person.concat(entry);
          this.customHeader = concat;
        });
      });
    },

    // 点击添加到已经显示的表头里面
    addCustomHeadItem(item, index) {
      this.customHeader[index].is_title = 1;
      let current = this.customHeader[index];

      this.updateCustomHeaderChangedList({
        id: current.id,
        is_title: current.is_title
      });
    },

    // 变更change数组
    updateCustomHeaderChangedList(item) {
      // 从数组中检索，传入的item是否存在，如果存在，变更is_title ,否则push
      let list = this.customHeaderChanged;
      let matchedIndex = list.findIndex(function(value, index, arr) {
        return value.id == item.id;
      });
      let matched = list.find(function(value, index, arr) {
        return value.id == item.id;
      });
      if (matchedIndex > -1) {
        this.customHeaderChanged[matchedIndex].is_title = item.is_title;
      } else {
        this.customHeaderChanged.push(item);
      }
    },

    // 删除已经显示的表头
    delCustomHeadItem(item, index) {
      let delTarget = this.customHeader.splice(index, 1)[0];
      delTarget.is_title = 2;
      this.customHeader.push(delTarget);

      let current = delTarget;
      this.updateCustomHeaderChangedList({
        id: current.id,
        is_title: current.is_title
      });
    },

    // 保存表头变更操作
    saveChangeCustomHeadItem() {
      let persionInfo = []; // 个人相关信息
      let entryInfo = []; // 入职相关信息
      this.customHeader.forEach(e => {
        if (e.type == 1) {
          persionInfo.push(e);
        } else {
          entryInfo.push(e);
        }
      });

      // 提交数据
      http
        .post(api.updatetitle, { data: { list: this.customHeaderChanged } })
        .then(res => {
          this.$Message.success("保存成功");
          this.getTableTitle(); //更新表格表头
          this.closeTableTitle(); // 关闭面板
        })
        .catch(error => {
          console.log("保存表头更变失败,", error);
        });
    },

    //获取表格表头
    getTableTitle() {
      http.get(api.gettitle, {}).then(res => {
        console.log("getTitle", res);
        let _cul = [];
        res.data.forEach(k => {
          k.title = k.cloumn_name;
          k.minWidth = 120;
          if(k.english_cloumn_name =="department"){
            k.english_cloumn_name ="organization_name"
          }
          k.key = k.english_cloumn_name;
         
          if (k.is_title == 1) {
            _cul.push(k);
          }
        });
        this.columns.splice(1, this.columns.length - 2); //删除旧的元素
        this.columns.splice(1, 0, ..._cul); // 插入新的元素
      });
    },

    // 点击切换员工的状态
    filter(index, status) {
      if(index){
        this.headerActiveIndex = index;
      }

      if(status){
        this.filterStatus = status;
      }else{
        status = this.filterStatus;
      }
      switch (status) {
        case "全部":
          this.employeeList = this.all;
          break;
        case "全职":
          this.employeeList = this.fulltime;
          break;
        case "实习生":
          this.employeeList = this.internship;

          break;
        case "试用期":
          this.employeeList = this.probation;
          break;
        case "待离职":
          this.employeeList = this.readyDimission;
          break;
        case "正式":
          this.employeeList = this.official;
          break;
        case "待入职":
          this.employeeList = this.all;
          break;
        case "已离职":
          this.employeeList = this.all;
          break;
      }
    },

    // 获取员工状态列表
    getEmployeeStatus() {
      http.get(api.employeecount, {}).then(res => {
        console.log("员工状态列表", res);
        this.employeeCount = res.data;
      });
    },

    // 刷新
    refresh() {
      this.showLoading = true;
      this.getTableTitle(); //获取表格表头
      this.getList(); //获取员工列表
      this.getTableHeadItem(); // 获取自定义表头
      this.getEmployeeStatus(); // 获取员工状态类型
    },

    // 工作城市选择
    workCityChange(a, b) {
      // this.createForm.work_city = a.join(',');
    },

    // 学习模式选择
    selecteChange(e){
      console.log(e);
      this.createForm.learning_modality = e;
    },

    // 保存编辑
    saveEdit() {
      this.saving =true;
      console.log("保存编辑",this.createForm,this.columns);
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          let formData = Object.assign([], this.createForm);
          // let work_city = formData.work_city;
          // if (work_city) {
          //   formData.work_city = work_city.join(",");
          // }
          http
            .post(api.employeecreate, { data: formData })
            .then(res => {
              this.$Message.success("保存成功");
              this.closeRightCard();
              this.saving = false;
              this.update();
            })
            .catch(error => {
              this.saving = false;
              console.log(error);
            });

         
        } else {
          this.saving = false;
          this.$Message.error("请填写必要信息");
        }
      });
    },

    // 更新表格数据
    update(){
      this.getList(this.filter);
    },
        getOrg() {
      this.$getOrgList().then(res => {
        let list =res.data.list ||[];
        let temp =[];
         list.forEach(e => {
              temp.push({
                value: e.organization_id,
                label: e.organization_name
              });
            });
      this.orgList = temp;
      });
    },
    orgChange(e){
      console.log(e);
      this.createForm.organization_name=e.label;
    }
  },

  mounted() {
    this.getTableTitle(); //获取表格表头
    this.getList(); //获取员工列表
    this.getTableHeadItem(); // 获取自定义表头
    this.getEmployeeStatus(); // 获取员工状态类型
    this.getOrg();
  }
};
</script>
<style lang="scss" scoped src="./index.scss"></style>